<template>
  <div id="demo">
    <h2 id="title">Waterfall 瀑布流示例 Demo</h2>
    <div id="buttons">
      <button class="button" @click="add">add</button>
      <button class="button" @click="remove">remove</button>
      <button class="button" @click="swap">swap</button>
      <button class="button" @click="edit">编辑</button>
      <button class="button" @click="okEdit">确定</button>
      <button class="button" @click="cancelEdit">取消</button>
      <button class="button" @click="revertLayout">恢复布局</button>
      {{ draggable }}
    </div>

    <!-- 演示响应式 cols 设置 -->
    <waterfall
      id="demo"
      ref="waterfall"
      :items="items"
      :cols="responsiveCols"
      :isEqualHeight="true"
      :gap="[30, 20]"
      itemKey="id"
      :draggable="draggable"
      :divider="true"
      :history="true"
    >
      <template #item="{ item }">
        <div class="demo-item-box">
          {{ item.title }}
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
import Waterfall from "./waterfallLayout.vue";

export default {
  components: { Waterfall },
  data() {
    return {
      index: 9,
      draggable: false,
      // 响应式列数，key是断点宽度，value是列数
      responsiveCols: {
        0: 1,
        600: 2,
        900: 3,
        1200: 4,
      },
      items: [
        {
          id: "1",
          title:
            "11111111111111111111111111111111111333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333",
        },
        { id: 2, title: 2 },
        {
          id: 3,
          title:
            "3333333333333333333333333333333333333333333333333333333333333333",
        },
        { id: 4, title: "4" },
        { id: 5, title: 5 },
        { id: 6, title: 6 },
        { id: 7, title: 7 },
        { id: 8, title: 8 },
        { id: 9, title: 9 },
      ],
    };
  },
  methods: {
    add() {
      this.index++;
      this.items.push({
        id: this.index,
        title: this.index,
      });
    },
    remove() {
      this.items.splice(this.items.length - 1, 1);
    },
    swap() {
      const temp = this.items[this.items.length - 1];
      this.$set(this.items, this.items.length - 1, this.items[0]);
      this.$set(this.items, 0, temp);
    },
    edit() {
      this.$refs.waterfall.edit();
    },
    okEdit() {
      this.$refs.waterfall.okEdit();
    },
    cancelEdit() {
      this.$refs.waterfall.cancelEdit();
    },
    revertLayout() {
      this.$refs.waterfall.revertLayout();
    },
  },
};
</script>

<style scoped>
#demo {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo-item-box {
  background-color: coral;
  word-break: break-all;
  padding: 20px;
}

#title {
  line-height: 26px;
}

#buttons {
  display: inline-block;
  line-height: 34px;
}

:deep .waterfall-container {
  height: calc(100% - 60px);
}
</style>
